import React from 'react';
import { Button } from 'antd'
import { connect } from 'react-redux';
import { joinChannnel, leaveChannel } from '../../../actions'
import RTCClient from '../../../utils/agora-rtc-client';
import StreamPlayer from '../../components/streamPlayer';
import './index.scss'

const rtc = new RTCClient();

const appid = 'ea84f56f4857492cb260d7f824916fd4';
const token = '006ea84f56f4857492cb260d7f824916fd4IABOS8edIbdO+axtwXJ0GLkoRpp2eli6X2EFVHG9GYfO2gx+f9gAAAAAEAA1BQ7XP2fNXwEAAQA+Z81f';
const channel = 'test'
class detailRedux extends React.Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    rtc.on('stream-added', (evt) => {
      let { stream } = evt
      console.log("[agora] [stream-added] stream-added", stream.getId())
      rtc.client.subscribe(stream);
    })

    rtc.on('stream-subscribed', (evt) => {
      let { stream } = evt
      console.log("[agora] [stream-subscribed] stream-added", stream.getId());
      const tempRemoteStreams = []
      if (!this.remoteStreams.find((it) => it.getId() === stream.getId())) {
        tempRemoteStreams.push(stream)
      };
      this.props.dispatch(setRemoteStreams(tempRemoteStreams));
    })

    rtc.on('stream-removed', (evt) => {
      let { stream } = evt
      console.log('[agora] [stream-removed] stream-removed', stream.getId())
      let tempRemoteStreams = remoteStreams.filter((it) => it.getId() !== stream.getId());
      this.props.dispatch(setRemoteStreams(tempRemoteStreams));
    })
  }

  joinChannnel() {
    this.props.dispatch(joinChannnel({
      rtc,
      appid,
      token,
      channel
    }))
  }

  leaveChannel() {
    this.props.dispatch(leaveChannel(rtc))
  }

  render() {
    const { localStream, remoteStreams } = this.props;
    return (
      <div className='detail-container'>
        <div className='detail-container__user'>
          <section className='detail-container__user__operation-section'>
            <Button type='primary' onClick={() => this.joinChannnel()}>join</Button>
            <Button type='primary' onClick={() => this.leaveChannel()}>leave</Button>
            <Button type='default' onClick={() => {
              this.props.history.push({
                pathname: '/'
              })
            }}>exit</Button>
          </section>
        </div>
        <div className='detail-container__agora'>
          <div className='detail-container__agora__container'>
            {
              localStream && <StreamPlayer stream={localStream} domId={localStream.getId()}></StreamPlayer>
            }
            {
              remoteStreams && remoteStreams.map((remoteStream) => (
                <StreamPlayer stream={remoteStream} domId={remoteStream.getId()}></StreamPlayer>
              ))
            }
          </div>
        </div>
      </div>
    )
  }
}
export default connect(
  state => ({
    number: state.number,
    localStream: state.localStream,
    remoteStreams: state.remoteStreams,
    showJoin: state.showJoin
  })
)(detailRedux);